<template>
	<view style="padding-bottom: 120upx;position: relative;">
		<image src="../../static/image/sw13.png" mode="widthFix" style="width: 60upx;height: 60upx;position: absolute;z-index: 20;right: 20upx;top: 20upx;border-radius: 40upx;opacity: 0.8;" :animation="animationData" @click="declick" v-if="res.radio"></image>
		
		<swiper indicator-dots="true" :autoplay="awiper_autoplay" interval='3000' circular="true" @change="chg_swiper" style="height: 1200upx;">
			<swiper-item style="width: 100%;height: 100%;position: relative;" v-if="res.video">
				<!-- custom-cache解决小程序的控制台报错 -->
				<video :src="res.video" 
				 id="myVideo" style="width: 100%;height: 100%;"
				 :custom-cache="false"
				 :controls="true" :muted="muted" 
				 :show-fullscreen-btn="false"
				>
				</video>
				<!-- :poster="res.posterimg" -->
			</swiper-item>
			<swiper-item v-for="(img,key) in goods_images" :key="key" style="height: 750upx;width: 100%;">
				<image :src="img" style="height: 100%;width: 100%;" mode="scaleToFill" />
			</swiper-item>
		</swiper>
		
		<view class="ptt">
			<view class="ptt_l">
				<view class="ptt_l_1">
					<text style="font-size: 20upx;">¥</text><text style="font-size: 48upx;" v-if="res.price">{{res.price}}</text>
				</view>
				<view class="ptt_l_2">
					拼团价
				</view>
				<view class="ptt_l_3">
					<text>原价 : ¥</text><text style="text-decoration: line-through;" v-if="res.marketprice">{{res.marketprice}}</text>
				</view>
			</view>
		</view>
		
		<view class="tejia" style="position: relative;">
			<view class="title" v-if="res.title">
				{{res.title}}
			</view>
			<view class="title1" style="width: 80%;" v-if="res.subtitle">
				{{res.subtitle}}
			</view>
			<view style="position: absolute;bottom: 20upx;right: 30upx;" @click="toggleMask('show')">
				<image style="width: 50upx;height: 50upx;margin-left: 35upx;" src="../../static/image/31.png"></image>
				<view style="font-size: 24upx;color: #DD3026;font-weight: bold;">分享赚佣金</view>
			</view>
		</view>
		
		<view class="hddjs_1">
			<!-- <view class="hddjs_1_t" style="font-family: Georgia, 'Times New Roman', Times, serif;margin-bottom: 10upx;">
				活动倒计时
			</view> -->
			<view class="hddjs_1_t" style="font-family: Georgia, 'Times New Roman', Times, serif;margin-bottom: 10upx;">
				<image src="../../static/djs.png" mode="widthFix" style="width: 300upx;"></image>
			</view>
			<view class="djs_1">
				<uni-countdown :day="day" :hour="hr" :minute="min" :second="sec"></uni-countdown>
			</view>
		</view>
		
		<view class="hddjs">
			<view class="fx1">
				<view class="tx">
					<view class="cy" style="line-height: 100upx;color: #000;">
						<text style="font-size: 38upx;color: #E92F27;">{{success_res.count}}</text><text style="font-size: 24upx;">人成功报名</text>
					</view>
				</view>
				<view class="yj1" style="color: #000000;font-size: 24upx;">
					浏览量{{1+ res.look_num*1}}
				</view>
			</view>
			<view style="position: relative;">
				<view style="width: 100%;height: 550upx;position: absolute;left: 0;top: 0;z-index: 9999;">
					
				</view>
				<swiper style="height: 550upx;background-color: #fff;margin-top: 20upx;border-radius: 10upx;" :indicator-dots="false" :vertical="true" :autoplay="true" circular>
					
					<swiper-item style="z-index: -1;">
							<view class="txzs">
								<view class="txlb" v-for=" (item,index) in newlist1 " :key="index">
									<view class="txlb_img">
										<image :src="item.avatar" mode=""></image>
									</view>
									<view class="txlb_name">
										{{item.nickname.slice(0, 1) + '*' +  item.nickname.slice(2, 3)}}
									</view>
								</view>
							</view>
					</swiper-item>
					<swiper-item style="z-index: -1;" v-if="newlist2.length>0">
							<view class="txzs">
								<view class="txlb" v-for=" (item,index) in newlist2 " :key="index">
									<view class="txlb_img">
										<image :src="item.avatar" mode=""></image>
									</view>
									<view class="txlb_name">
										{{item.nickname.slice(0, 1) + '*' +  item.nickname.slice(2, 3)}}
									</view>
								</view>
							</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="pdxq" v-if="show_swiper && newlist.length>2">
			<view class="pdtitle">
				<view class="pdt1" v-if="pt_data.count">
					{{pt_data.count}}人在拼单,可直接参与
				</view>
				<view class="ckgd" @click="toggleMask2('show')">
					查看更多 >
				</view>
			</view>
		</view>
		
		<view style="position: relative;"  v-if="show_swiper && newlist.length>2">
			<!-- <view style="width: 75%;height: 220upx;position: absolute;left: 0;top: 0;z-index: 9999;">
				
			</view> -->
			<swiper :indicator-dots="false" :vertical="true" :autoplay="true" circular="true" @change="chg_swiper">
				<swiper-item v-for="(item,index) in newlist" :key="index" style="height: 220upx;width: 100%;">
					<view class="qpd">
						<view class="info">
							<view class="infotx">
								<image :src="item[0].user.avatar" mode=""></image>
							</view>
							<view class="name">
								{{ item[0].user.nickname.slice(0, 1) + '*' +  item[0].user.nickname.slice(2, 3) }}
							</view>
						</view>
						<view class="qpdr">
							<view class="qpdr1">
								还差<text>{{item[0].surplus_num}}人</text>拼成
							</view>
							<view class="btn" @click="group_submit(item[0].id)">
								<!-- @click="toggleMask1('show')" -->
								去拼单
							</view>
						</view>
					</view>
					<view class="qpd" v-if='item[1]'>
						<view class="info">
							<view class="infotx">
								<image :src="item[1].user.avatar" mode=""></image>
							</view>
							<view class="name">
								{{ item[1].user.nickname.slice(0, 1) + '*' +  item[1].user.nickname.slice(2, 3) }}
							</view>
						</view>
						<view class="qpdr">
							<view class="qpdr1">
								还差<text>{{item[1].surplus_num}}人</text>拼成
							</view>
							<view class="btn" @click="group_submit(item[1].id)">
								去拼单
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<view v-if="!show_swiper && ptlist_data.length>0" class="qpd" v-for=" (item,index) in ptlist_data " :key="index">
			<view class="info">
				<view class="infotx">
					<image :src="item.user.avatar" mode=""></image>
				</view>
				<view class="name">
					{{item.user.nickname.slice(0, 1) + '*' +  item.user.nickname.slice(2, 3)}}
				</view>
			</view>
			<view class="qpdr">
				<view class="qpdr1">
					还差<text>{{item.surplus_num}}人</text>拼成
				</view>
				<view class="btn" @click="group_submit(item.id)">
					去拼单
				</view>
			</view>
		</view>
		
		<view class="zbf" @click="toggleMask3('show')" v-if="res.merchname">
			<view class="zbf_bg">
				<view class="zbf_info">
					<view class="zbf_img">
						<image src="../../static/image/sponsor.png" mode=""></image>
					</view>
					<view class="zbf_info2">
						<view class="zbf_info2_name">
							{{res.merchname}}
						</view>
						<view class="zbf_info2_kh">
							{{res.merch_desc}}
						</view>
					</view>
				</view>
				<view class="lxzbf">
					联系主办方
				</view>
			</view>
		</view>
		<!-- <view class="jgjs">
			<view class="jgt1">
				机构介绍
			</view>
			<view class="jgt2">
				我是机构介绍,我是机构介绍我是机构介绍我是机构介绍我是机构介绍我是机构介绍,我是机构介绍
			</view>
		</view> -->
		<view class="spxq">
			<rich-text :nodes="content"></rich-text>
		</view>
		<view style="width: 100%;background-color: #fff;margin-top: 20upx;padding: 50upx;">
			<view style="display: flex;justify-content: center;">
				<image style="width: 50upx;height: 50upx;" src="../../static/24.png" mode=""></image>
				<view style="color: #FE471F;height: 40upx;line-height: 40upx;font-size: 38upx;">
					收益排行榜
				</view>
			</view>
			<view style="display: flex;margin-top: 50upx;">
				<view style="flex: 0.5;font-size: 38upx;">
					排名
				</view>
				<view style="flex: 2;font-size: 38upx;">
					用户
				</view>
				<view style="flex: 1.5;text-align: right;font-size: 38upx;color: #FE471F;">
					收益
				</view>
			</view>
			<view style="display: flex;margin-top: 30upx;" v-for="(item,index) in phlist" :key='index'>
				<view style="flex: 0.5;font-size: 28upx;text-align: center;">
					{{index + 1}}
				</view>
				<view style="flex: 2;font-size: 24upx;display: flex;">
					<image style="width: 40upx;height: 40upx;border-radius: 20upx;" :src="item.avatar" mode=""></image>
					<view style="font-size: 28upx;margin-left: 10upx;height: 40upx;line-height: 40upx;">
						{{item.nickname}}
					</view>
				</view>
				<view style="flex: 1.5;text-align: right;font-size: 24upx;color: #FE471F;">
					累计收益{{item.leiji}}元
				</view>
			</view>
		</view>
		<view style="background-color: #fff;padding: 20rpx;" v-if="latitude && longitude">
			<view style="padding: 14rpx;background-color: #fff;border: 6rpx solid #e8e8e8; border-radius: 10rpx;">
				<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :markers="covers" @tap="openMap()">
				</map>
				<view style="height: 50rpx;line-height: 50rpx;text-align: center;font-size: 24rpx;">点击上方地图可直接导航</view>
			</view>
		</view>
		<view style="background-color: #fff;overflow: hidden;margin-top: 20rpx;">
			<!-- <view style="width: 100%;text-align: center;font-size: 34upx;margin-top: 10upx;">
				<text style="">我也要做活动</text>
			</view> -->
			<!-- <view style="width: 80%;margin: 10upx auto 30upx;">
				<image :src="res.thumbs[1]" mode="widthFix" style="width: 100%;"></image>
			</view> -->
			<view style="height: 100rpx;">
				<view style="display: flex;justify-content: space-between;padding: 0upx 30upx 30upx 30upx;border-bottom: 1upx solid #EFEFEF;">
					<view style="height: 100rpx;line-height: 100rpx;font-size: 38upx;color: #FE471F;">
						我也要做活动
					</view>
					<view style="background-color: #FE471F;color: #FFFFFF;height: 70rpx;line-height: 70rpx;border-radius: 35upx;text-align: center;font-size: 24upx;padding: 0upx 30upx;margin-top: 15rpx;" @click.stop.prevent="toggleMask4('show')">
						联系平台
					</view>
				</view>
			</view>
		</view>
		
		<view class="mask" :class="maskState4===0 ? 'none' : maskState4===1 ? 'show' : ''" @click="toggleMask4">
			<view style="width: 80%;height: 750upx;margin-left: 10%;background-color: #FFFFFF;border-radius: 20upx;margin-bottom: 30%;position: relative;">
				<view style="position: absolute;top: -35upx;right: -35upx;width: 70upx;height: 70upx;">
					<image style="width: 100%;height: 100%;" src="../../static/image/xh.png" mode=""></image>
				</view>
				<view style="text-align: center;height: 120upx;line-height: 120upx;font-size: 38upx;">
					校能信息
				</view>
				<view style="display: flex;justify-content: space-between;padding: 0upx 30upx 30upx 30upx;border-bottom: 1upx solid #EFEFEF;">
					<view style="height: 70upx;line-height: 70upx;font-size: 38upx;color: #FE471F;">
						{{res.platform_phone}}
					</view>
					<view style="background-color: #FE471F;color: #FFFFFF;height: 70upx;line-height: 70upx;border-radius: 35upx;text-align: center;font-size: 24upx;padding: 0upx 30upx;" @click.stop.prevent="Callphone1()">
						一键拨打
					</view>
				</view>
				<view style="width: 300upx;height: 300upx;margin: 50upx auto 0;">
					<image style="width: 100%;" :src="res.platform_qrcode" mode="widthFix" @click.stop.prevent="preview(res.platform_qrcode)"></image>
				</view>
				<view style="font-size: 24upx;text-align: center;color: #8C8C8C;margin-top: 40upx;">
					点击识别二维码联系我
				</view>
			</view>
		</view>
		<view class="mask" :class="maskState3===0 ? 'none' : maskState3===1 ? 'show' : ''" @click="toggleMask3">
			<view style="width: 80%;height: 750upx;margin-left: 10%;background-color: #FFFFFF;border-radius: 20upx;margin-bottom: 30%;position: relative;">
				<view style="position: absolute;top: -35upx;right: -35upx;width: 70upx;height: 70upx;">
					<image style="width: 100%;height: 100%;" src="../../static/image/xh.png" mode=""></image>
				</view>
				<view style="text-align: center;height: 120upx;line-height: 120upx;font-size: 38upx;">
					在线客服: {{res.merch_realname}}
				</view>
				<view style="display: flex;justify-content: space-between;padding: 0upx 30upx 30upx 30upx;border-bottom: 1upx solid #EFEFEF;">
					<view style="height: 70upx;line-height: 70upx;font-size: 38upx;color: #FE471F;">
						{{res.merch_mobile}}
					</view>
					<view style="background-color: #FE471F;color: #FFFFFF;height: 70upx;line-height: 70upx;border-radius: 35upx;text-align: center;font-size: 24upx;padding: 0upx 30upx;" @click.stop.prevent="Callphone()">
						一键拨打
					</view>
				</view>
				<view style="width: 300upx;height: 300upx;margin: 50upx auto 0;">
					<image style="width: 100%;" :src="res.kefu" mode="widthFix" @click.stop.prevent="preview(res.kefu)"></image>
				</view>
				<view style="font-size: 24upx;text-align: center;color: #8C8C8C;margin-top: 40upx;">
					点击识别二维码联系我
				</view>
			</view>
		</view>
		<view class="mask" :class="maskState1===0 ? 'none' : maskState1===1 ? 'show' : ''" @click="toggleMask1">
			<view style="width: 80%;height: 420upx;margin-left: 10%;background-color: #FFFFFF;border-radius: 20upx;margin-bottom: 60%;position: relative;">
				<view style="position: absolute;top: -35upx;right: -35upx;width: 70upx;height: 70upx;">
					<image style="width: 100%;height: 100%;" src="../../static/image/xh.png" mode=""></image>
				</view>
				<view style="text-align: center;margin-top: 50upx;">
					参与开着摩托的到来的拼单
				</view>
				<view style="text-align: center;font-size: 24upx;color: #999;margin-top: 20upx;">
					仅剩1个名额, 23:08:42.0后结束
				</view>
				<view style="display: flex;justify-content: space-around;width: 50%;margin-left: 25%;margin-top: 30upx;">
					<view style="width: 100upx;height: 100upx;overflow: hidden;border-radius: 50upx;">
						<!-- <image style="width: 100%;height: 100%;" src="../../static/image/sw6.png" mode=""></image> -->
					</view>
					<view style="width: 100upx;height: 100upx;overflow: hidden;border-radius: 50upx;">
						<!-- <image style="width: 100%;height: 100%;" src="../../static/image/sw6.png" mode=""></image> -->
					</view>
				</view>
				<view style="width: 90%;height: 80upx;text-align: center;line-height: 80upx; margin-left: 5%;border-radius: 10upx;background-color: #CE4032;color: #fff;margin-top: 30upx;">
					参与拼单
				</view>
			</view>
		</view>
		<view class="mask" :class="maskState2===0 ? 'none' : maskState2===1 ? 'show' : ''" @click="toggleMask2">
			<view style="width: 80%;height: 800upx;margin-left: 10%;background-color: #FFFFFF;border-radius: 20upx;margin-bottom: 30%;position: relative;">
				<view style="position: absolute;top: -35upx;right: -35upx;width: 70upx;height: 70upx;">
					<image style="width: 100%;height: 100%;" src="../../static/image/xh.png" mode=""></image>
				</view>
				<view style="text-align: center;height: 100upx;line-height: 100upx;font-size: 34upx;border: 1upx solid #EFEFEF;overflow: hidden;">
					正在拼单
				</view>
				<scroll-view scroll-y="true" style="height: 700upx;">
					
						<view style="border: 1upx solid #EFEFEF;overflow: hidden;border-radius: 20upx;padding: 20upx;display: flex;justify-content: space-between;" v-for="(item,index) in ptlist" :key="index">
							<view style="display: flex;">
								<view style="width: 80upx;height: 80upx;border-radius: 40upx;overflow: hidden;">
									<image style="width: 100%;height: 100%;" :src="item.user.avatar" mode=""></image>
								</view>
								<view style="margin-left: 20upx;">
									<view>
										{{item.user.nickname.slice(0, 1) + '*' +  item.user.nickname.slice(2, 3)}}还差{{item.surplus_num}}人
									</view>
									<!-- <view style="font-size: 26upx;">
										剩余 23:59:59.7
									</view> -->
								</view>
							</view>
							<view @click="group_submit(item.id)" style="line-height: 70upx;width: 150upx;height: 70upx;background-color: #E92F27;text-align: center;color: #fff;border-radius: 15upx;margin-top: 5upx;">
								去拼单
							</view>
						</view>
						
				</scroll-view>
			</view>
		</view>
		<view @click.stop.prevent="jumpto_orderlist" style="text-align: center;line-height: 110rpx;height: 110rpx;position: fixed;bottom: 0;background: linear-gradient(to right, #FF9323, #FA5024);width: 100%;color: #fff;font-size: 38rpx;right: 0;width: 450upx;z-index: 99999;" v-if="res.buyed==1">
			查看我的支付凭证
		</view>
		<view class="menu">
			<view class="ml">
				<!-- <view class="home">
					<view class="homeimg">
						<image src="../../static/image/sw8.png" mode=""></image>
					</view>
					<view class="menu1">
						首页
					</view>
				</view> -->
				<button class="home" open-type="contact" style="background-color: #fff;">
					<view class="homeimg" style="margin-top: -3upx;">
						<u-icon name="kefu-ermai" size="60" color="#909399" style="margin-left: 0upx;"></u-icon>
						<!-- <image src="../../static/image/sw8.png" mode=""></image> -->
					</view>
					<view class="menu1" style="margin-top: -17upx;">
						客服
					</view>
				</button>
				<view class="home"  @click="jumptouser">
					<view class="homeimg">
						<u-icon name="account" size="53" color="#909399" style="margin-left: 30upx;margin-top: 2upx;"></u-icon>
						<!-- <image src="../../static/image/sw8.png" mode=""></image> -->
					</view>
					<view class="menu1">
						我的
					</view>
				</view>
			</view>
			<view class="mr">
				<view class="ddgm"  @click="submit()" v-if="res.buyed==0">
					<view class="jiage">
						¥{{res.marketprice}}
					</view>
					<view class="wenzi">
						单独购买
					</view>
				</view>
				<view class="fqpd" @click="group_submit(0)" v-if="res.buyed==0">
					<view class="jiage">
						¥{{res.price}}
					</view>
					<view class="wenzi">
						发起拼单
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分享面板 -->
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content">
				<scroll-view class="view-content" scroll-y>
					<view class="share-list" style="margin-top: 60upx;">
						<button class="share-item" v-if="!have_openid" @click="jumptologin">
							<image :src="shareList[0].icon" mode=""></image>
							<text>{{shareList[0].text}}</text>
						</button>
						<button class="share-item" open-type="share" v-if="have_openid">
							<image :src="shareList[0].icon" mode=""></image>
							<text>{{shareList[0].text}}</text>
						</button>
						<button class="share-item" @click="share_show" >
							<image :src="shareList[1].icon" mode="widthFix"></image>
							<text>{{shareList[1].text}}</text>
						</button>
					</view>
					<view style="width: 100%;text-align: center;">
						取消
					</view>
				</scroll-view>
			</view>
		</view>
		
		<!-- 距顶部..upx显示的部分 -->
		<view v-if="res.share_icon==1">
			<view class="fenxiang" style="position: fixed;top: 70%;right: 0;" v-if="scrollTop>600"  @click="share_show">
				<view class="fenxiang_img" style="position: relative;">
					<image style="width: 260upx;height: 100upx;" src="../../static/image/fenxiang.png" mode=""></image>
					<view class="fenxiang_wz" style="position: absolute;top: 15upx;left: 50upx;color: #fff;">
						<view style="font-size: 24upx;">生成海报</view>
						<!-- <view style="font-size: 24upx;">赚 <text style="font-size: 28upx;">10</text>元</view> -->
					</view>
				</view>
			</view>
		</view>
		
		<view class="fade_in_out" :class="fade"  @click="hide">
			<view style="position: fixed;top: 0upx;left: 60upx;width: 630upx; height: 1050upx; z-index: 999999;">
				<image :src="share_img" style="width: 100%;height: 100%;margin-top: 40upx;" mode=""></image>
			</view>
			<view style="width:100%;margin-top: 1120upx;text-align: center;z-index: 999999999999;" @click="saveImgToLocal">
				<button
					style="
					margin: 0;padding: 0;border: 1px solid transparent;outline: none;
					width: 300upx;height: 90upx;border-radius: 40upx;background-color: #D41C52;line-height: 90upx;color: #fff;display: inline-block;"
				>保存海报</button>
			</view>
			<view style="width:100%;text-align: center;height: 90upx;line-height: 90upx;color: #fff;position: fixed;top: 40upx;left: 50%;transform: translate(-50%, 0);z-index:9999999999999999" @click="openSetting">
				<!-- <button
					style="
					margin: 0;padding: 0;border: 1px solid transparent;outline: none;background: transprant;
					width: 300upx;height: 90upx;line-height: 90upx;color: #fff;display: inline-block;"
					open-type="openSetting" bindopensetting="callback"
				></button> -->
				图片保存不了?来这里设置
			</view>
		</view>
		
		<view style="position:fixed;top:9999rpx;z-index: -1;opacity: 0;">
			<canvas class="canvas" canvas-id="myCanvas"></canvas>
		</view>
	</view>
</template>

<script>
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue'
	export default {
		onShareAppMessage(res) {
			if (this.openid == '' || this.openid == undefined) {
				uni.navigateTo({
					url: '../login/login'
				})
			}
			if (res.from === 'button') {// 来自页面内分享按钮
			}
			return {
				imageUrl: this.goods_images[0],
				title: this.res.shorttitle,
				path: '/pages/index/index?goodsid=' + this.goodsid  + '&pid=' + this.res.userid + '&pids=' + this.pid
			}
		},
		components: {
			uniCountdown
		},
		data() {
			return {
				covers: [{
					id:0,
					latitude: '',//纬度
					longitude: '',//经度
					iconPath: '../../static/image/530.png',	//显示的图标		
					width:30,   //宽
					height:30,
				}],
				awiper_autoplay: true,
				latitude: '',
				longitude: '',
				have_openid: false,
				pid: 0,
				pids: 0,
				res:{},
				success_res:{},
				goodsid: '422', // 商品id
				pt_id: 0, // 拼团id
				openid: '',
				phone: '', // 绑定的手机号
				show_fullscreen_btn: false, // 显示全屏按钮
				muted: false, // 视频是否静音播放
				content:'',
				content1:'我是详情广告图',
				lb:1,
				color1:'#fff',
				color2:'#F7F7F7',
				day: 0,
				hr: 0,
				min: 0,
				sec: 0,
				goods_images:[],
				maskState: 0, //分享面板显示状态
				maskState1:0,
				maskState2:0,
				maskState3:0,
				maskState4:0,
				shareList: [
					{
						type: 1,
						icon: '/static/temp/share_wechat.png',
						text: '分享给好友'
					},
					{
						type: 2,
						icon: '/static/temp/share_moment.png',
						text: '生成海报'
					},
				],
				share_img: '', // 海报图片
				fade:'none',
				index: 1, // 海报分次加载,提高用户体验
				animationData: {},
				off: true,
				p: '', // 视频文件
				innerAudioContext:{}, //音频文件
				video: '',
				imgURL1: '', // 背景图
				imgURL2: '', // 二维码
				imgURL3:'',
				imgURL4:'',
				CanvasID: 'myCanvas',
				imgShow: false,
				scrollTop: 0, // 距顶部距离
				pt_data:{}, // 拼团数据
				show_swiper: true,
				newlist: [], // 轮播拼团数组
				newlist1: [], // 轮播拼团数组
				newlist2: [], // 轮播拼团数组
				platform_phone:'',//平台电话
				ptlist: [],
				phlist:[],
				ptlist_data: [], // 长度小于二、
				trade_no:'',
				peopleinfokm:'',
				qrcode1:'',
				qrcode2:'',
			}
		},
		onShow() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.have_openid = true
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {}
			});
			uni.getStorage({
				key: 'phone',
				success: (res) => {
					this.phone = res.data
				},
				fail: () => {}
			});
			// 初始化一个动画
			var animation = uni.createAnimation({
					duration: 2000,
					timingFunction: 'linear',
			})
			this.animation = animation
			setTimeout(()=>{
				this.declick();
			},3000)
		},
		onHide() {
			this.norotateAndScale()
		},
		onLoad (e) {
			if ( e.pid ) { // 邀请码进入存上级id
				this.pid = e.pid
				uni.setStorage({
					key: 'pid',
					data: e.pid
				})
			}
			if (e.pids) {
				this.pids = e.pids
				uni.setStorage({
					key: 'pids',
					data: e.pids
				})
			}
			if (e.goodsid) {
				this.goodsid = e.goodsid
				uni.setStorage({
					key: 'goodsid',
					data: e.goodsid
				})
			}
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.have_openid = true
					this.openid = res.data
				},
				fail: () => {}
			});
			setTimeout(()=>{
				this.setAjax()
			},500)
			
			uni.getStorage({
				key: 'phone',
				success: (res) => {
					this.phone = res.data
				},
				fail: () => {}
			});
			
		},
		methods: {
			setAjax () {
				uni.request({
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail&id=' + this.goodsid +'&app=1',
					method: 'POST',
					data: {
						'openid':this.openid,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.setsuccess()
						this.setgroup()
						this.paihang()
						this.res = res.data
						this.trade_no = res.data.trade_no
						this.peopleinfokm = res.data.peopleinfokm
						this.qrcode1 = res.data.peopleqrcode
						this.qrcode2 = res.data.qunqrcode
						if (res.data.video) {
							this.awiper_autoplay = false
						}
						uni.setNavigationBarTitle({
						　　title:res.data.title
						})
						this.latitude = res.data.lat
						this.longitude = res.data.lng
						this.covers[0].latitude = res.data.lat
						this.covers[0].longitude = res.data.lng
						console.log(this.latitude)
						var content = res.data.content;
						content = content.replace(/data-lazy/g,"src");
						content = content.replace(/style="/g,'style="width:100%;')
						this.content = content;
						// this.xq1 = res.data.content
						var myDate = res.data.endtimes*1000 - new Date().getTime();
						if (myDate<=0) {
							uni.showModal({
								title: '提示',
								content: '活动已结束',
								success: function (res) {
									if (res.confirm) {
										uni.reLaunch({
											url: '../user/user'
										})
									} else if (res.cancel) {
										uni.reLaunch({
											url: '../user/user'
										})
									}
								}
							});
						} else {
							this.day = parseInt(myDate / (1000 * 60 * 60 * 24));
							this.hr = parseInt((myDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
							this.min = parseInt((myDate % (1000 * 60 * 60)) / (1000 * 60));
							this.sec = Math.floor((myDate % (1000 * 60)) / 1000);
						}
						this.goods_images[0] = res.data.thumb // 添加默认启动轮播图
						// 轮播图对象转数组
						for (let i in res.data.thumbs) {
							this.goods_images[i] = res.data.thumbs[i]
						}
					}
				})
				uni.hideLoading()
			},
			setsuccess () {
				uni.request({ // 获取分享的二维码图片等信息
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail.order_sucess&app=1',
					method: 'POST',
					data: {
						'goods_id':this.goodsid,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.success_res = res.data
						let newlist1 = []
						let newlist2 = []
						if (this.success_res.list.length> 0) {
							let swiper_list1 = this.success_res.list.splice(0,30)
							if ( swiper_list1.length <=15 ) {
								newlist1 = swiper_list1.slice(0,15)
							} else {
								newlist1 = swiper_list1.slice(0,15)
								newlist2 = swiper_list1.slice(15,30)
							}
							this.newlist1 = newlist1
							this.newlist2 = newlist2
						}
						
					}
				})
			},
			paihang () {
				uni.request({ // 获取收益排行
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail.get_yjlist&app=1',
					method: 'POST',
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.phlist = res.data.list
						
					}
				})
			},
			setgroup () {
				uni.request({ // 获取分享的二维码图片等信息
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail.pt_data&app=1',
					method: 'POST',
					data: {
						'goods_id':this.goodsid,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						this.pt_data = res.data
						this.ptlist = res.data.pt_list
						let newlist = []
						// 列表长度大于0才显示
						if ( this.pt_data.pt_lists.length> 0) {
							let swiper_list = this.pt_data.pt_lists.splice(0,10)
							if (swiper_list.length <= 2) {
								// newlist[0] = swiper_list
								this.ptlist_data = res.data.pt_list
								this.show_swiper = false
								return
							} else if (swiper_list.length <= 4) {
								newlist[0] = swiper_list.splice(0,2)
								newlist[1] = swiper_list.splice(0,4)
							} else if (swiper_list.length <= 6) {
								newlist[0] = swiper_list.splice(0,2)
								newlist[1] = swiper_list.splice(0,4)
								newlist[2] = swiper_list.splice(0,6)
							} else if (swiper_list.length <= 8) {
								newlist[0] = swiper_list.splice(0,2)
								newlist[1] = swiper_list.splice(0,4)
								newlist[2] = swiper_list.splice(0,6)
								newlist[3] = swiper_list.splice(0,8)
							} else if (swiper_list.length <= 10) {
								newlist[0] = swiper_list.splice(0,2)
								newlist[1] = swiper_list.splice(0,4)
								newlist[2] = swiper_list.splice(0,6)
								newlist[3] = swiper_list.splice(0,8)
								newlist[4] = swiper_list.splice(0,10)
							}
						}
						this.newlist = newlist
					}
				})
			},
			preview (imglist) {
				var list = []
				list[0] = imglist
				uni.previewImage({
						urls: list,
						longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
								},
								fail: function(err) {}
						}
				});
			},
			submit() {
				if (this.openid == '' || this.openid == undefined) {
					uni.showToast({
						title: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '../login/login'
						})
					}, 1100);
					return
				}
				var o = this
				var data = {
					Total_fee: this.res.marketprice,
					openid: this.openid,
					pid: this.pid,
					pids: this.pids,
					goodsid: this.goodsid,
					SetBody: this.res.title,
					trade_no: o.trade_no,
				}
				uni.request({
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.jspay&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						var userinfo = res.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: userinfo.timeStamp,
							nonceStr: userinfo.nonceStr,
							package: userinfo.package,
							signType: userinfo.signType,
							paySign: userinfo.paySign,
							trade_no: o.trade_no,
							appId: userinfo.appId,
							success: res => {
								// 微信支付成功之后,吊起的接口刷新页面
								uni.showToast({
									title: '支付成功',
									icon:'none'
								})
								if(o.res.peopleinfo == 1) {
									uni.navigateTo({
										url: '/pages/settle/detail?ordersn=' + o.trade_no
									})
									return
								}
								setTimeout(() => {
									uni.navigateTo({
										url: '../pay/paysuccess'
									})
										// o.setAjax()
								}, 2000);
								
							},
							fail: function(err) {
								console.log('支付失败----------------------')
								return
							}
						});
					}
				})
				
			},
			group_submit(index) {
				if (this.openid == '' || this.openid == undefined) {
					uni.showToast({
						title: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '../login/login'
						})
					}, 1100);
					return
				}
				var o = this
				var data = {
					Total_fee: this.res.price,
					openid: this.openid,
					pid: this.pid,
					pids: this.pids,
					goodsid: this.goodsid,
					SetBody: this.res.title,
					pt_id: index,
					trade_no: o.trade_no,
				}
				uni.request({
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=order.jspaypt&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: (res) => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						var userinfo = res.data
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: userinfo.timeStamp,
							nonceStr: userinfo.nonceStr,
							package: userinfo.package,
							signType: userinfo.signType,
							paySign: userinfo.paySign,
							trade_no: o.trade_no,
							appId: userinfo.appId,
							success: res => {
								// 微信支付成功之后,吊起的接口刷新页面
								uni.showToast({
									title: '支付成功',
									icon:'none'
								})
								if(o.res.peopleinfo == 1) {
									uni.navigateTo({
										url: '/pages/settle/detail?ordersn=' + o.trade_no+'&peopleinfokm='+o.peopleinfokm+'&qrcode1='+o.qrcode1+'&qrcode2='+o.qrcode2
									})
									return
								}
								setTimeout(() => {
									o.setAjax()
									// 购买后弹出一个画面：邀请好友拼团赚佣金➕分享按钮
									o.toggleMask('show')
									uni.navigateTo({
										url: '../pay/paysuccess'
									})
								}, 2000);
								
							},
							fail: function(err) {
								console.log('支付失败----------------------')
								return
							}
						});
					}
				})
				// if (this.phone == '' || this.phone == undefined) { //没获取到用户号码跳转
				// 	// uni.showToast({
				// 	// 	title: '需要获取你的手机号登录'
				// 	// })
				// 	// setTimeout(function() {
				// 	// 	uni.navigateTo({
				// 	// 		url: '../login/login'
				// 	// 	})
				// 	// }, 1100);
				// 	// return
				// } 
				// else {}
			},
			openMap() { //点击地图
					var o = this;
					// 未开启定位跳转到开启定位页面
					uni.getLocation({
							type: 'gcj02', //返回可以用于uni.openLocation的经纬度
							success: function (res) {
								const latitude = parseInt(o.latitude);
								const longitude = parseInt(o.longitude);
									uni.openLocation({
											latitude: latitude,
											longitude:longitude,
											success: function () {
													console.log('success');
											}
									});
							},
							fail: function (err) {
								uni.showToast({
									title: '未开启定位权限',
									icon: 'none',
									duration: 1200
								})
								setTimeout(()=>{
									uni.openSetting()
								},1400)
							},
					});
			  },
			chg_swiper(e) {
				if (e.detail.current == 0) {
					this.muted = false
				} else {
					this.muted = true
				}
			},
			// 页面滚动时监听页面的滚动距离
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			catchtouchmove(){
				return false
			},
			Callphone (e) {
				uni.makePhoneCall({
					phoneNumber: '18921254856',
					success: (res) => {
						console.log('调用成功!')	
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			Callphone1 (e) {
				uni.makePhoneCall({
					phoneNumber: this.res.platform_phone,
					success: (res) => {
						console.log('调用成功!')	
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			declick() {
				if (this.off) {
					this.rotateAndScale()
				} else {
					this.norotateAndScale()
				}
				this.off = !this.off
			},
			rotateAndScale() {
				this.animation.rotate(360000).scale(1, 1).step({ duration: 2000000 })
				this.animationData = this.animation.export()
				
				this.innerAudioContext = uni.createInnerAudioContext();
				
				this.innerAudioContext.src = this.res.radio;
				this.innerAudioContext.obeyMuteSwitch = false; // iphonex静音模式下播放音频
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
			},
			norotateAndScale() {
				this.animation.rotate(0).scale(1, 1).step({ duration: 0 })
				this.animationData = this.animation.export()
				this.innerAudioContext.stop();
			},
			// 加载海报
			share_show () {
				if (this.openid == '' || this.openid == undefined) {
					uni.showToast({
						title: '分享前需要先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '../login/login'
						})
					}, 1100);
					return
				}
				let o = this
				o.index++
				if (o.index == 2) {
					uni.showLoading({
						title:"加载中..."
					})
				}
				uni.request({ // 获取分享的二维码图片等信息
					url: 'https://www.xiaonengxinxi.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=goods.detail.get_share&app=1',
					method: 'POST',
					data: {
						'openid':this.openid,
						'goodsid':this.goodsid,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					success: (res) => {
						o.imgURL1 = res.data.posterimg // 背景图
						o.imgURL2 = res.data.qrcodeimg // 二维码
						
						if (res.data.user_adv) {
							o.imgURL3 = res.data.user_adv // 头像
						}
						if (res.data.user_name) {
							o.imgURL4 = res.data.user_name //昵称
						}
						
						console.log(o.imgURL1)
						console.log(o.imgURL2)
						console.log(o.imgURL3)
						console.log(o.imgURL4)
						
						o.draw()
					}
				})
				
			},
			async draw() {
				var o = this
				//canvas绘画海报
				let myctx = uni.createCanvasContext(o.CanvasID, o);
				let _poster1 = await o.getImageInfo(o.imgURL1); //背景图
				let _poster2 = await o.getImageInfo(o.imgURL2); // 二维码
				
				myctx.fillRect(0, 0, uni.upx2px(650), uni.upx2px(1050)); //canvas画布大小
				
				myctx.drawImage( _poster1.path, 0, 0, uni.upx2px(630), uni.upx2px(1050)); //背景
				myctx.drawImage( _poster2.path, uni.upx2px(450), uni.upx2px(830), uni.upx2px(150), uni.upx2px(150));
				
				if (o.imgURL3) {
					let _poster3 = await o.getImageInfo(o.imgURL3);
					var avatarurl_width = 45; //绘制的头像宽度
					var avatarurl_heigth = 45; //绘制的头像高度
					var avatarurl_x = 10; //绘制的头像在画布上的位置
					var avatarurl_y = 10; //绘制的头像在画布上的位置
					myctx.save();
					myctx.beginPath(); //开始绘制
					//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
					myctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
					myctx.clip();//画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
					myctx.drawImage( _poster3.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
				}
				
				if (o.imgURL4) {
					myctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
					myctx.draw(); //可将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
					myctx.setFillStyle('#000')//文字颜色：默认黑色
					myctx.font = 'normal 16px sans-serif';	// 字体样式
					myctx.fillText(o.imgURL4 , 75, 35); // 位置
				}
				
				//延迟后渲染至canvas上
				setTimeout(function() {
					myctx.draw(true, ret => {
						o.getNewImage();
					});
				}, 600);
			},
			getImageInfo(imgSrc){
				return new Promise(async (resolve, reject) => {
					// #ifndef H5 || APP-PLUS
					if(/^data:image\/(\w+);base64/.test(imgSrc)) {
						imgSrc = await this.base64src(imgSrc)
					}
					// #endif
					uni.getImageInfo({
						src: imgSrc,
						success: (image) => {
							// 添加https://thirdwx.qlogo.cn安全下载域名
							image.path =  /^(http|\/\/|\/|wxfile|data:image\/(\w+);base64|file|bdfile)/.test(image.path)  ? image.path :  `/${image.path}`
							resolve(image)
							// console.log('获取图片成功',image.path)
						},
						fail: (err) => {
							reject();
							// console.log('获取图片失败', err, imgSrc)
						}
					});
				})
			},
			base64src(base64data) {
				return new Promise((resolve, reject) => {
					const fs = uni.getFileSystemManager()
					const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
					  if (!format) {reject(new Error('ERROR_BASE64SRC_PARSE'))}
					const time = new Date().getTime();
					const filePath = `${wx.env.USER_DATA_PATH}/${time}.${format}`
					const buffer = uni.base64ToArrayBuffer(bodyData)
					fs.writeFile({
					    filePath,
					    data: buffer,
					    encoding: 'binary',
					    success() {
							resolve(filePath)
					    },
					    fail(err) {
							reject()
							this.$emit('fail', {
							  error: err
							})
							console.log('获取base64图片失败', err)
					    }
					})
				})
			},
			getNewImage() {
				var o = this
				uni.canvasToTempFilePath({ //把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
					canvasId: o.CanvasID,
					quality: 1,
					complete: res => {
						o.share_img = res.tempFilePath;
						console.log(o.share_img)
						uni.hideLoading()
						if (o.share_img) {
							setTimeout(()=> {
								o.fade = 'block'
							}, 10);
						}
					}
				});
			},
			hide () {
				this.fade = 'none'
			},
			// 打开微信设置权限页面
			openSetting () {
				uni.openSetting()
			},
			saveImgToLocal(){
				let o = this
				wx.saveImageToPhotosAlbum({
					filePath: this.share_img,
					success: function(res) {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功！',
						})
					},
					fail: function(res) {
						uni.hideLoading();
						uni.showToast({
							title: '保存失败！',
							icon: 'none'
						})
					}
				})
				
				// uni.downloadFile({
				// 		url: o.share_img,
				// 		success: (res) =>{
				// 			var imgpath = res.tempFilePath;
				// 			if (res.statusCode === 200){
				// 				console.log('111' + imgpath)
								
				// 			}
				// 			setTimeout(function() {
				// 				o.hide()
				// 			}, 10);
				// 		}
				// })
			},
			// 分享模块
			toggleMask(type){ 
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			toggleMask1(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState1 = 2;
				setTimeout(()=>{
					this.maskState1 = state;
				}, timer)
			},
			toggleMask2(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState2 = 2;
				setTimeout(()=>{
					this.maskState2 = state;
				}, timer)
			},
			toggleMask3(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState3 = 2;
				setTimeout(()=>{
					this.maskState3 = state;
				}, timer)
			},
			toggleMask4(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState4 = 2;
				setTimeout(()=>{
					this.maskState4 = state;
				}, timer)
			},
			jumptouser () {
				uni.navigateTo({
					url: '../user/user'
				})
			},
			jumpto_orderlist () {
				if(this.res.orderstatus==0){
					uni.navigateTo({
						url: '../order/order?status=0'
					});
				}
				else if(this.res.orderstatus==5){
					uni.navigateTo({
						url: '../order/order?status=5'
					});
				}
				else{
					uni.navigateTo({
						url: '../order/order?status=10'
					});
				}
			},
			btnChange (){
				this.lb = 1
				this.color1 = '#fff'
				this.color2 = '#F7F7F7'
			},
			btnChange1 (){
				this.lb = 2
				this.color1 = '#F7F7F7'
				this.color2 = '#fff'
				
			},
			jumptologin () {
				uni.navigateTo({
					url: '../login/login'
				})
			},
		}
	}
</script>

<style lang="scss">
	page view {font-family: 黑体;}
	button:after {
	  border: none;
	}
	.canvas {
		width: 630upx;
		height: 1050upx;
		opacity: 0;
	}
	/* 海报 */
	.fade_in_out {
		position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba( 0, 0, 0, 0.9);z-index: 99;text-align: center;
		
		&.block {
			display: block;
			animation: showPopup 0.6s linear both;
		}
		&.none {
			display: none;
			animation: hidePopup 0.6s linear both;
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
	}
	
	/* 分享面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9999999;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #FDFDFD;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			.mask-content{
				transform: translateY(0);
			}
		}
	}
	.share-header{
		height: 110upx;
		// font-size: $font-base+2upx;
		// color: font-color-dark;
		display:flex;
		align-items:center;
		justify-content: center;
		padding-top: 10upx;
		&:before, &:after{
			content: '';
			width: 240upx;
			// heighg: 0;
			// border-top: 1px solid $border-color-base;
			transform: scaleY(.5);
			margin-right: 30upx;
		}
		 &:after{
			 margin-left: 30upx;
			 margin-right: 0;
		 }
	}
	.share-list{
		display:flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}
	.share-item{
		margin: 0;padding: 0;border: 1px solid transparent;outline: none;background: transparent;border: none;border: 0;
		min-width: 33.33%;
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 180upx;
		image{
			width: 80upx;
			height: 80upx;
		}
		text{
			// font-size: $font-base;
			// color: $font-color-base;
		}
	}
	.share-item::after{
		border: none;
	}
	.ptt {
		display: flex;justify-content: space-between;padding: 20upx 30upx 0 30upx;background-color: #fff;line-height: 60upx;
		.ptt_l {
			display: flex;
			.ptt_l_1 {color: #E02E28;font-weight: 550;}
			.ptt_l_2 {color: #fff;background-color: #E02E28;font-size: 24upx;padding: 0 20upx;border-radius: 20upx;height: 45upx;line-height: 45upx;margin-top: 10upx;margin-left: 20upx;}
			.ptt_l_3 {font-size: 24upx;margin-left: 30upx;}
		}
		.ptt_r {font-size: 24upx;}
	}
	.hddjs_1 {
		background-color: #FDDA06;height: 280upx;overflow: hidden;
		.hddjs_1_t {text-align: center;font-size: 52upx;color: #000;font-weight: 600;font-family: 'STXingkai';margin-top: 40upx;}
		.djs_1 {margin: 20upx 22% 0;}
	}
	.hddjs {
		background-color: #ECECEC;padding: 20upx;
		.fx1 {
			padding: 0upx 20upx;margin-top: -50upx;
			background-color: #fff;height: 100upx;border-radius: 10upx;display: flex; justify-content: space-between;
			.yj1 {line-height: 100upx;height: 100upx;text-align: center;color: #E92F27;border-radius: 15upx;background-color: #fff;font-size: 32upx;}
		}
		.txzs {
			background-color: #fff;border-radius: 10upx;display: flex;flex-wrap: wrap;margin-top: 20upx;padding-left: 10upx;padding-bottom: 20upx;
			.txlb {
				padding: 20upx 30upx;
				.txlb_img {
					width: 80upx;height: 80upx;overflow: hidden;border-radius: 40upx;
					image {width: 100%;height: 100%;}
				}
				.txlb_name {text-align: center;font-size: 22upx;margin-top: 20upx;}
			}
		}
	}
	.zbf {
		padding: 20upx;background-color: #fff;
		.zbf_bg {
			background-color: #F8F8F8;border-radius: 10upx;
			display: flex;justify-content: space-between;padding: 30upx 20upx;
			.zbf_info {
				display: flex;
				.zbf_img {
					width: 70upx;height: 70upx;overflow: hidden;border-radius: 35upx;margin-top: 6upx;
					image {width: 100%;height: 100%;}
				}
				.zbf_info2 {
					margin-left: 30upx;
					.zbf_info2_name {}
					.zbf_info2_kh {color: #828282;}
				}
			}
			.lxzbf {border: 4upx solid #E06640;color: #E06640;border-radius: 8upx;line-height: 70upx;padding: 0 10upx;height: 80upx;}
		}
	}
	.active {background-color: #F7F7F7;}
	.menu {
		width: 100%;
		height: 110upx;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		display: flex;
		z-index: 99999;
		.ml {display: flex;flex: 1.2;}
		.mr {display: flex;flex: 2;}
		.home {flex: 1;font-size: 22upx;padding: 15upx;}
		.menu1 {color: #999;text-align: center;margin-top: -6upx;}
		.ddgm {flex: 0.9;background-color: #F3A9A6;color: #FFFFFF;text-align: center;padding: 20upx 0;}
		.fqpd {flex: 1;background-color: #E92F27;color: #FFFFFF;text-align: center;padding: 20upx 0;}
		.homeimg {overflow: hidden;position: relative;width: 100%;height: 60upx;border-radius: 30upx;}
		.homeimg image {top: 50%;left: 50%;transform: translate(-50%, -50%);position: absolute;width: 60upx;height: 60upx;border-radius: 30upx;}
	}
	.lb {
		padding: 0 20upx;
		.lb1 {display: flex;justify-content: space-between;padding: 20upx 0;border-top: 1upx solid #ccc;}
		.lb1:nth-child(1) {border: none;}
		.lbtx {display: flex;}
		.lbtxtp {width: 70upx;height: 70upx;overflow: hidden;border-radius: 35upx;}
		.lbnm {line-height: 70upx;margin-left: 15upx;color: #999;}
		.time {line-height: 70upx;color: #999;}
		.ckgdnr {text-align: center;color: #687085;height: 70upx;line-height: 70upx;}
	}
	.nr {margin-top: 20upx;background-color: #fff;}
	.bmxq {padding-top: 10upx;display: flex;}
	.bm {background-color: #fff;padding: 20upx 30upx;flex: 1;}
	.zq {background-color: #fff;padding: 20upx 30upx;flex: 1;}
	.jgjs {
		background-color: #fff;margin-top: 20upx;padding: 20upx;
		.jgt1 {font-size: 30upx;}
		.jgt2 {font-size: 24upx;color: #999;margin-top: 20upx;}	
		}
	.spxq {background-color: #fff;margin-top: 20upx;padding: 20upx;}
	.qpd {
		margin-top: 2upx;
		background-color: #fff;
		display: flex;justify-content: space-between;padding: 20upx 20upx;
		.info {display: flex;}
		.infotx {width: 70upx;height: 70upx;overflow: hidden;border-radius: 35upx;}
		.name {line-height: 70upx;margin-left: 15upx;}
		text {color: #f00;}
		.qpdr {display: flex;}
		.qpdr1 {line-height: 70upx;font-size: 24upx;}
		.btn {line-height: 70upx;width: 150upx;height: 70upx;background-color: #E92F27;text-align: center;color: #fff;border-radius: 15upx;margin-left: 15upx;}
		}
	.ckgd {color: #999;font-size: 24upx;}
	.pdtitle {display: flex;justify-content: space-between;padding: 20upx 20upx;}
	.pdxq {background-color: #fff;}
	page {background-color: #F0F0F1;}
	.ggt {height: 150upx;background-color: #F0F0F2;border-radius: 15upx;text-align: center;margin-top: 25upx;line-height: 120upx;color: #E92F27;}
	.yj {line-height: 100upx;width: 250upx;height: 100upx;text-align: center;color: #E92F27;border-radius: 15upx;background-color: #fff;font-size: 24upx;}
	.cy {line-height: 70upx;color: #999;}
	.txtp {width: 70upx;height: 70upx;overflow: hidden;border-radius: 35upx;}
	.tx {display: flex;}
	.fx {display: flex;justify-content: space-between;margin-top: 40upx;}
	.title1 {font-size: 24upx;color: #8D8C8C;line-height: 42upx;}
	.title {margin: -5upx 0 20upx 0;font-weight: 550;font-size: 34upx;}
	.banner {
		width: 100%;
		height: 750upx;
		image {
			width: 100%;
			height: 100%;
		}
		swiper-item {position: relative;}
		.spimg1 {position: absolute;top: 20upx;left: 20upx;width: 250upx;height: 80upx;}
		.spimg2 {position: absolute;top: 20upx;right: 20upx;width: 220upx;height: 80upx;}
		.spimg3 {position: absolute;top: 170upx;right: 20upx;width: 300upx;height: 120upx;}
	}
	.tejia {
		background-color: #fff;
		padding: 20upx 30upx;
		.bg {
			padding: 10upx 30upx;
			background-color: #FF3C24;
			height: 120upx;
			border-radius: 15upx;
			display: flex;
			color: #fff;
			.left {
				flex: 1;
					.xstjt {font-size: 44upx;}
					.price {margin-top: 20upx;}
					text {font-size: 22upx;margin-left: 5upx;}
			}
			.right {
				position: relative;
				flex: 1;	
				margin-left: 100upx;
				.djs {font-size: 28upx;margin-left: 20upx;}
				.sj {display: flex;margin-top: 20upx;}
				.sjk {width: 50upx;height: 50upx;background-color: #fff;border-radius: 15upx;color: #FF3C24;font-size: 38upx;text-align: center;line-height: 50upx;margin: 0 10upx;}
			}
		}
	}
</style>
